<template>
  <div class="settings-container">
    <div class="app-container">
      <el-card>
        <!-- v-model关联的值是默认激活哪个菜单, 点击切换面板的时候 对应面板的name会同步给activeName -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- label面板的标题  el-tab-pane标签中书写的就是对应面板的内容-->
          <el-tab-pane label="角色管理" name="role">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="showDialog = true; title = '新增角色'">新增角色</el-button>
            <!-- 表格 data表格数据 border表格边框  stripe斑马纹-->
            <el-table v-loading="loading" :data="tableData" style="width: 100%; margin: 20px 0" border stripe>
              <!-- label 控制每一列的标题  prop是要渲染的字段-->
              <el-table-column type="index" label="序号" width="180" :index="indexMethod" />
              <el-table-column prop="name" label="角色名称" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作" prop="id">
                <!-- 作用域插槽所在的对象上有 row指的是当前行的数据 -->
                <template #default="{row}">
                  {{ row.id }}
                  <el-button type="primary" size="small" @click="showRightsDialog(row.id)">分配权限</el-button>
                  <el-button size="small" type="warning" @click="showEdit(row.id)">编辑</el-button>
                  <el-button type="danger" size="small" @click="delRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件
              current-page 页码
              background 激活的页码带背景色
              page-sizes 可选择每页条数的下拉框
              page-size 每页条数
              layout 容器 分页组件展示的 可选项
              total 总条数
              @size-change 每页条数发生变化触发对应的处理函数
              @current-change 页码发生变化触发对应的处理函数
            -->
            <el-pagination
              :current-page="page"
              background
              :page-sizes="[1, 2, 3, 4]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">
            <el-form label-width="120px" style="width: 600px">
              <el-form-item label="企业名称">
                <el-input :value="companyInfo.name" disabled />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input :value="companyInfo.companyAddress" disabled />
              </el-form-item>
              <el-form-item label="公司电话">
                <el-input :value="companyInfo.companyPhone" disabled />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input :value="companyInfo.mailbox" disabled />
              </el-form-item>
              <el-form-item label="备注">
                <el-input :value="companyInfo.remarks" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!--★★★★★对话框不要放在表格中 或者tabs组件中 添加/编辑对话框★★★★★ -->
      <el-dialog :title="title" :visible="showDialog" @close="closeDialog">
        <el-form ref="roleForm" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="form.description" placeholder="请输入角色描述" />
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="clickSubmit">确认</el-button>
        </template>
      </el-dialog>
      <!-- 分配权限对话框 -->
      <el-dialog
        title="分配权限"
        :visible="showRolesVisible"
        @close="showRolesVisible = false"
      >
        <el-tree
          ref="treeRef"
          v-loading="roleLoading"
          :data="permissionList"
          :props="{label: 'name'}"
          show-checkbox
          check-strictly
          default-expand-all
          node-key="id"
        />
        <template #footer>
          <el-button @click="showRolesVisible = false">取消</el-button>
          <el-button type="primary" @click="setRights">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { reqDelRoleById, reqGetRolesList, reqAddRole, reqGetRoleDetail, reqUpdateRole, reqSetRightsForRole } from '@/api/setting'
import { reqGetCompanyInfo } from '@/api/company'
import { reqGetPermissionList } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Settings',
  data() {
    return {
      activeName: 'role',
      tableData: [], // 表格数据
      page: 1, // 页码
      pagesize: 2, // 每页条数
      total: 0, // 总条数
      loading: false,
      showDialog: false, // 对话框的布尔值
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: ['change', 'blur'] }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: ['change', 'blur'] }
        ]
      },
      title: '新增角色',
      companyInfo: {}, // 企业信息
      showRolesVisible: false, // 控制分配权限的布尔值
      permissionList: [], // 权限列表
      permIds: [], // 用户已有权限列表
      roleId: '', // 分配权限的角色id
      roleLoading: false
    }
  },
  created() {
    this.getRolesList()
    // this.getCompanyInfo()
  },
  methods: {
    // tabs组件的点击的处理函数
    handleClick(tab, e) { // tab是当前激活的菜单 e事件对象
      console.log(tab, e)
      // 进入第二个面板并且是第一次进入再获取企业信息
      if (tab.name === 'company' && !this.companyInfo.id) {
        this.getCompanyInfo()
      }
    },
    // 获取所有角色列表
    async getRolesList() {
      this.loading = true
      const { data: { total, rows }} = await reqGetRolesList(this.page, this.pagesize)
      this.tableData = rows
      this.total = total
      this.loading = false
    },
    // 每页条数发生变化的处理函数
    handleSizeChange(val) {
      console.log('每页条数发生了变化', val)
      // 将最新的每页条数赋值 携带最新的每页条数发送请求
      this.pagesize = val
      this.page = 1 // 每次都从第一页展示数据
      this.getRolesList()
    },
    // 页码发生变化的处理函数
    handleCurrentChange(val) {
      console.log('页码发生了变化', val)
      // 将最新的页码赋值 携带最新的页码发送请求
      this.page = val
      this.getRolesList()
    },
    // 自定义索引列 使用方法自定义索引列从0开始的
    indexMethod(index) {
      // 前一页的页码 * 每页条数 + 1
      // console.log(index)
      return index + (this.page - 1) * this.pagesize + 1
    },
    // 删除角色
    delRole(id) {
      console.log('删除', id)
      // 1. 确认消息提示
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        // 2. 发送请求
        await reqDelRoleById(id)
        // 4. bug 如果数组长度只有一条了, 删除完是有bug, 需要让page--
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        // 3. 重新获取列表
        this.getRolesList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 关闭对话框
    closeDialog() {
      this.showDialog = false
      // 重置表单数据
      this.$refs.roleForm.resetFields()
      this.form = {
        name: '',
        description: ''
      }
    },
    clickSubmit() {
      this.$refs.roleForm.validate(async boo => {
        if (!boo) return
        if (this.form.id) {
          // 编辑
          // 1. 发送请求
          await reqUpdateRole(this.form)
        } else {
          // 新增
          // 1. 发送请求
          await reqAddRole(this.form)
        }
        // 3. 关闭对话框
        this.closeDialog()
        // 4. 重新渲染
        this.page = 1
        this.getRolesList()
      })
    },
    // 查询回显
    async showEdit(id) {
      this.title = '修改角色'
      const { data } = await reqGetRoleDetail(id)
      this.form = data
      this.showDialog = true
    },
    // 获取企业信息
    async getCompanyInfo() {
      const { data } = await reqGetCompanyInfo(this.$store.state.user.userInfo.companyId)
      this.companyInfo = data
    },
    // 点击分配权限按钮 查询当前角色的信息
    async showRightsDialog(id) {
      this.roleLoading = true
      // 存储要分配权限的角色ｉｄ
      this.roleId = id
      this.showRolesVisible = true
      const { data } = await reqGetPermissionList()
      this.permissionList = tranListToTreeData(data, '0')
      const { data: { permIds }} = await reqGetRoleDetail(id)
      this.permIds = permIds // 当前角色已有的权限
      // this.$refs.setCheckedKeys([权限点的id])
      this.$refs.treeRef.setCheckedKeys(this.permIds)
      this.roleLoading = false
    },
    // 为角色分配权限
    async setRights() {
      // 发送设置新权限点的请求
      // console.log(this.$refs.treeRef.getCheckedKeys()) // 获取已选中的节点
      await reqSetRightsForRole(this.roleId, this.$refs.treeRef.getCheckedKeys())
      // 关闭对话框
      this.showRolesVisible = false
    }
  }
}
</script>

<style>

</style>
